<template>
  <el-row>
    <el-col v-loading="pageLoading" :span="24">
      <Portlet title="赔付承诺" style="position:relative;">
        <el-form  :model="model" :label-position="labelPosition" ref="ruleForm" label-width="87px">
          <el-row>
            <el-col :offset="1" :md="12" :lg="8" :xl="6">
              <el-form-item label="超时赔付" prop="startCompensation" :rules="[
                    { validator: isFormatNumber, int: 7, decimal: 2, message: '输入8位以下整数或2位小数', trigger: 'blur' }
                  ]">
                <el-input v-model="model.startCompensation" placeholder="请输入" style="position:relative;">
                  <template slot="append">元/天</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :offset="1" :md="12" :lg="8" :xl="6">
              <el-form-item label="货丢赔" prop="loseGoods" :rules="[
                    { validator: isFormatNumber, int: 7, decimal: 2, message: '输入8位以下整数或2位小数', trigger: 'blur' }
                  ]">
                <el-input v-model="model.loseGoods" placeholder="请输入" style="position:relative;">
                  <template slot="append">倍运费</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :offset="1" :md="12" :lg="8" :xl="6">
              <el-form-item label="货损赔" prop="cargoDamage" :rules="[
                    { validator: isFormatNumber, int: 7, decimal: 2, message: '输入8位以下整数或2位小数', trigger: 'blur' }
                  ]">
                <el-input v-model="model.cargoDamage" placeholder="请输入" style="position:relative;">
                  <template slot="append">倍运费</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24" :offset="1">
              <el-checkbox v-model="isChecked">货差赔(物流原因):免费补发</el-checkbox>
            </el-col>
            <el-col class="text-center" :span="24">
              <el-row>
                <el-col class="text-center" :span="6" :offset="9">
                    <el-button type="primary" :loading="loading" @click="submit" style="width:100%; margin-top: 15px; margin-bottom: 15px">确认</el-button>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </el-form>
        <span style="position:absolute;left:94px;top:18px; font-size: 14px; color: red;">注:以下填写内容将展示给商家</span>
      </Portlet>
    </el-col>
  </el-row>
</template>
<script>
import {dotData, confirm} from '@/utils'
import {isFormatNumber} from '@/utils/validate'
export default {
  name: 'compensatePromiseIndex',
  data() {
    return {
      isChecked: false,
      loading: false,
      pageLoading: false,
      model: {
        loseGoods: '',
        startCompensation: '',
        cargoDamage: ''
      },
      labelPosition: 'left'
    }
  },
  methods: {
    isFormatNumber,
    submit() {
      this.$refs.ruleForm.validate(result => {
        if (!result) {
          return
        }
        let costDat = {}
        costDat.lose = parseFloat(this.model.loseGoods)
        costDat.overtime = parseFloat(this.model.startCompensation)
        costDat.damage = parseFloat(this.model.cargoDamage)
        costDat.reissue = this.isChecked ? 1 : 0
        console.log('提交参数', costDat)
        this.loading = true
        this.$ajax.post('/ms-warehouse-trunk/compensate/save-trunkUser-compensate', costDat).then(response => {
          this.loading = false
          console.log('response.data', response.data)
          const success = dotData(response, 'success')
          if (success) {
            // 保存成功
            confirm('保存成功', '提示', {
              type: 'success'
            })
          }
        })
      })
    },
    initInfo() {
      this.pageLoading = true
      this.$ajax.get('/ms-warehouse-trunk/compensate/get-trunkUserCompensate').then(response => {
        const success = dotData(response, 'success')
        if (success) {
          this.model.startCompensation = dotData(response, 'data.overtime')
          this.model.loseGoods = dotData(response, 'data.lose')
          this.model.cargoDamage = dotData(response, 'data.damage')
          let reissue = dotData(response, 'data.reissue')
          if (reissue === 1) {
            this.isChecked = true
          } else {
            this.isChecked = false
          }
        }
      }).finally(_ => {
        this.pageLoading = false
      })
    }
  },
  created() {
    this.initInfo()
  }
}
</script>
